<template>
  <div :data-title="title" class="me-ct-body" v-title>
    <el-container class="me-ct-container">
      <el-main>
        <div class="me-ct-title me-area">
          <template v-if="isTagView">
            <img :src="ct.avatar?ct.avatar:defaultAvatar" class="me-ct-picture" />
            <h3 class="me-ct-name">{{ct.tagName}}</h3>
          </template>

          <template v-else>
            <img :src="ct.avatar?ct.avatar:defaultAvatar" class="me-ct-picture" />
            <h3 class="me-ct-name">{{ct.categoryName}}</h3>
            <p>{{ct.description}}</p>
          </template>

          <span class="me-ct-meta">{{ct.articleNum}} 文章</span>
        </div>

        <div class="me-ct-articles">
          <ArticleList :queryOptions="queryOptions" />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import ArticleList from '@/components/article/ArticleList'
import { getTagDetail } from '@/api/tag'
import { getCategoryDetail } from '@/api/category'
import defaultAvatar from '@/assets/img/logo.png'

export default {
  name: 'BlogCategoryTag',
  watch: {
    $route: 'getCategoryOrTagAndArticles'
  },
  data () {
    return {
      defaultAvatar: defaultAvatar,
      ct: {},
      queryOptions: {
        year: '',
        month: '',
        category: '',
        tags: []
      }
    }
  },
  components: {
    ArticleList
  },
  created () {
    if (this.isTagView) {
      this.queryOptions.tags = this.$route.params.id
    } else {
      this.queryOptions.category = this.$route.params.id
    }
    this.getCategoryOrTagAndArticles()
  },
  computed: {
    title () {
      let curPath = this.$route.path
      if (curPath.includes('/tag/byId')) {
        return `${this.ct.tagName} - 标签 - For Fun`
      } else {
        return `${this.ct.categoryName} - 文章分类 - For Fun`
      }
    },
    isTagView () {
      let path = this.$route.path
      let isTagView = path.includes('/tag/byId')
      return !!isTagView
    }
  },
  methods: {
    getCategoryOrTagAndArticles () {
      let id = this.$route.params.id
      if (this.isTagView) {
        this.getTagDetail(id)
      } else {
        this.getCategoryDetail(id)
      }
    },
    getCategoryDetail (id) {
      let that = this
      getCategoryDetail(id)
        .then(data => {
          that.ct = data.data
        })
        .catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error',
              message: '文章分类加载失败',
              showClose: true
            })
          }
        })
    },
    getTagDetail (id) {
      let that = this
      getTagDetail(id)
        .then(data => {
          that.ct = data.data
        })
        .catch(error => {
          if (error !== 'error') {
            that.$message({
              type: 'error',
              message: '标签加载失败',
              showClose: true
            })
          }
        })
    }
  }
}
</script>

<style>
.me-ct-body {
  /* margin: 0 auto 140px; */
  min-width: 100%;
}

.el-main {
  padding: 0;
}

.me-ct-title {
  text-align: center;
  height: 150px;
  padding: 20px;
}
.me-ct-title h3 {
  text-align: center;
  padding: 5px;
  margin-bottom: 10px;
}
.me-ct-title p {
  text-align: center;
  font-size: 14px;
  margin-bottom: 10px;
}
.me-ct-picture {
  width: 60px;
  height: 60px;
}

.me-ct-name {
  font-size: 28px;
}

.me-ct-meta {
  margin: 10px;
  font-size: 12px;
  color: #969696;
}

.me-ct-articles {
  margin-top: 10px;
  padding: 0 5px;
}
</style>
